import { memo } from 'react';
import { View } from '@tarojs/components';
import Placeholder from 'components/Placeholder'
import ScrollPageView from 'components/ScrollPageView';
import ListRow from './ListRow';

import s from './index.module.scss';
import '../Album/cache/sky.scss'


interface HighProps {
  selected: boolean,
  initialize: true
}

function High(props: HighProps) {
  if (!props.initialize) {
    return
  }

  const _view = {
    display: props.selected ? 'block' : 'none'
  }

  return (
    <View className={s.wrapper} style={_view} >
      <div className={`${s.line} ${s.line1}`}>
        <div className={s.meteor}></div>
      </div>
      <div className={`${s.line} ${s.line2}`}>
        <div className={s.meteor}></div>
      </div>
      <div className={`${s.line} ${s.line3}`}>
        <div className={s.meteor}></div>
      </div>
      <div className={`${s.line} ${s.line4}`}>
        <div className={s.meteor}></div>
      </div>
      <div className={`${s.line} ${s.line5}`}>
        <div className={s.meteor}></div>
      </div>
      <div className={`${s.line} ${s.line6}`}>
        <div className={s.meteor}></div>
      </div>
      <div className={`${s.line} ${s.line7}`}>
        <div className={s.meteor}></div>
      </div>
      <div className={`${s.line} ${s.line8}`}>
        <div className={s.meteor}></div>
      </div>
      <div className={`${s.line} ${s.line9}`}>
        <div className={s.meteor}></div>
      </div>
      <div className={`${s.line} ${s.line10}`}>
        <div className={s.meteor}></div>
      </div>
      
      <ScrollPageView
        className={s.entry_wrapper}
        isHeaderPlaceholder={false}
        isBottomPlaceholder
        navigationBarStyle={{
          background: 'transparent'
        }}
      >
        <Placeholder type='wholeNavigationBar' />
        <View className={s.section_title}>微信小程序</View>
        <View className={s.section}>
          <ListRow title='官方组件演示' icon='teamwork' path='/miniui/navigation/index' />
          <ListRow title='Icon' icon='rect_210' path='/pages/icon/index' />
          <ListRow title='Taro UI' icon='goods' path='/pages/highQuality/requestList/index' />
          <ListRow title='自研组件演示' icon='purchase' />
          <ListRow title='大型实战' icon='calendar' />
        </View>

        <div className={s.section_title}>HTML/CSS 基础</div>
        <div className={s.section}>
          <ListRow title='元素与选择器' icon='rect_210' />
          <ListRow title='CSS3 动画' icon='rect_210' />
          <ListRow title='CSS3 3D' icon='rect_210' />
        </div>

        <div className={s.section_title}>前端框架</div>
        <div className={s.section}>
          <ListRow title='React' icon='rect_210' />
          <ListRow title='Next.js' icon='rect_210' />
          <ListRow title='Vue3' icon='rect_210' />
          <ListRow title='Angular' icon='rect_210' />
        </div>

        <div className={s.section_title}>精品项目</div>
        <div className={s.section}>
          <ListRow title='手表电商' icon='rect_210' path='/pages/watchapp/index' />
        </div>
      </ScrollPageView>
    </View>
  )
}

export default memo(High);
